.search{
  color:#fff;
  padding-top: 50px;
  // padding-top: 100px;

  /deep/ .van-search, /deep/ .van-search__content{
    background-color: transparent;
    padding: 0;
  }
  /deep/ .van-search .van-cell{
    padding: 3px 5px 5px 0;
  }
  /deep/ .van-cell{
    border-bottom: 1px solid #fff;
    color: #fff;
  }
  /deep/ .van-field__control{
    color: #fff;
  }
  /deep/ .van-tabs__nav{
    background-color: transparent;
  }
  /deep/ .van-tab{
    color: #fff;
  }
  /deep/ .van-tabs__line{
    background-color: #fff;
    height: 2px;
  }
  /deep/ .van-tabs--line .van-tabs__wrap{
    height: 32px;
  }
  /deep/ .van-tabs__wrap{
    margin-bottom: 10px;
  }
  /deep/ .van-sticky{
    position: fixed;
    top: 50px;
    width: 100%;
    background-color: #3c3c3c;
  }  

  .topnav{
    display: flex;
    height: 50px;
    padding: 0 10px;
    align-items: center;
    background-color: #3c3c3c;
    position: fixed;
    top: 0;
    left: 0;
    width: calc(~"100% - 20px");
    z-index: 99;
  }
  .back{
    width: 30px;
    text-align: left;
  }
  .search-box{
    flex: auto;
    margin-right: 10px;
  }

  .hot-rank{
    margin-top: 10px;
    padding: 0 10px;
    .title{
      font-size: 14px;
      font-size: bold;
    }
    .hot-item{
      display: flex;
      align-items: center;
      padding: 10px;

      .hot-index{
        width: 30px;
        font-size: bold;
        color: #fff;
      }
      .active{
        color: #feef9a;
      }
      .hot-info{
        width: calc(~"100% - 80px");
        .song-name{
          font-size: 14px;
          font-weight: bold;
        }
        .type{
          display: inline-block;
          width: 28px;
          margin-left: 5px;
          margin-top: 2px;
          color: red;
        }
        .song-desc{
          font-size: 12px;
          margin-top: 5px;
          color: #999;
        }
      }
      .hot-score{
        width: 50px;
        color: #999;
      }
    }
  }

  .search-suggest{
    margin: 0 20px;
    color: #000;
    background-color: #999;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 99;
  }
  .suggest-msg{
    color: #fff;
    font-size: 14px;
    padding: 12px 25px;
    background-color: #3c3c3c;
    border-bottom: 1px solid #999;
  }

  .search-match{
    padding: 0 20px;
    .title{
      margin-top: 10px;
    }
    .song-item{
      padding: 10px;
      display: flex;
      align-items: center;
    }
    .song-info{
      width: calc(~"100% - 40px");

    }
    .songname{
      font-size: 14px;
      margin-bottom: 5px;
    }
    .singer{
      color: #999;
    }
    .play-icon{
      margin-left: auto;
    }
    
  }

  .history-wrapper{
    font-size: 14px;
    padding: 0 10px;
    .title{
      line-height: 32px;
    }
    .remove-icon{
      margin-top: 3px;
      margin-left: 5px;
    }
  }
  .history {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
  }

  .history-box{
    // width: 200%;
  }
  .history-item{
    float: left;
    font-size: 12px;
    background-color: #cccccc;
    padding: 2px 10px;
    margin: 5px;
    border-radius: 16px;
  }
  

  
}